<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>药材展示</title>
  <link
          rel="stylesheet"
          href="/lib/layui-v2.6.3/css/layui.css"
          media="all"
  />
  <link rel="stylesheet" href="../css/public.css" media="all" />
  <script src="/lib/layui-v2.6.3/layui.js"></script>
  <style>
    /* body {
      background-color: white;
    } */
    .pst {
      margin-bottom: 10px;
      font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
      font-size: 16px;
    }
    .show4 {
      margin-left: -60px;
    }
    .show2{
      margin-left: -30px;
    }
  </style>
</head>
<body>
<div class="layuimini-main">
  <fieldset class="table-search-fieldset" style="background-color: white">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px ; display: flex">
      <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
          <div class="layui-inline">
            <!-- <label class="layui-form-label">搜索内容</label> -->
            <div class="row">
              <div class="layui-col-sm3">
                <select name="leibie" class="layui-form-inline" id="search_yaocai">
                  <option value="zhname">中文名</option>
                  <option value="enname">英文名</option>
                  <option value="miaoname">苗药名</option>
                  <option value="suname">俗名/异名</option>
                  <option value="latinname">拉丁名</option>
                </select>
              </div>
              <div class="layui-col-sm7">
                <div class="layui-input-inline">
                  <input
                          type="text"
                          name="username"
                          lay-verify="required"
                          lay-reqtext="内容不能为空"
                          lay-
                          autocomplete="off"
                          class="layui-input"
                          id="searchContext"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="layui-inline">
            <button
                    type="button"
                    class="layui-btn layui-btn-primary"
                    lay-submit
                    lay-filter="data-search-btn"
                    id="searchBtn"
            >
              <i class="layui-icon"></i> 搜 索
            </button>
          </div>
        </div>
      </form>
    </div>
  </fieldset>
  <!-- 药材数据展示模块 -->
  <div
          style="
          margin-top: 30px;
          margin-left: 10px;
          padding-right: 20px;
          background-color: white;
          padding-bottom: 10px;
          display: none;
        "
          id="yaocai"
  >
    <div class="layui-row" style="margin-left: 60px; margin-bottom: 10px">
      <div class="layui-col-sm2" style="margin-top: 20px">
        <img
                style="height: 200px; width: 150px; border: 1px black solid"
                class="layui-upload-img"
                id="demo1"
        />
      </div>
      <div class="layui-col-sm10">
        <div class="layui-row" style="margin-top: 20px">
          <p class="pst layui-col-sm1" ><strong>【中文名】</strong></p>
          <div id="zhname" class="layui-col-sm11" ></div>
        </div>
        <div class="layui-row">
          <p class=" pst layui-col-sm1"><strong>【苗药名】</strong></p>
          <div id="miaoname" class="layui-col-sm11"></div>
        </div>
        <div  class="layui-row">
        <p class="pst layui-col-sm2"><strong>【俗名/异名】</strong></p>
        <div id="suname" class="layui-col-sm10 show4"></div>
      </div>
        <div class="layui-row">
          <p class="pst layui-col-sm1">
            <strong>【英文名】</strong>
          </p>
          <div id="enname" class="layui-col-sm11 "></div>
        </div>
        <div class="layui-row">
          <p class="pst layui-col-sm1"><strong>【拉丁名】</strong></p>
          <div id="latinname" class="layui-col-sm11"></div>
        </div>
        <div class="layui-row">
          <p class="pst layui-col-sm2"><strong>【苗药类型】</strong></p>
          <div id="miaoType" class="layui-col-sm10 show4"></div>
        </div>
      </div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【入药部位】</strong></p>
      <div id="usePart" class="layui-col-sm11"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1 "><strong>【药用来源】</strong></p>
      <div id="pharmSrc" class="layui-col-sm11"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【药性】</strong></p>
      <div id="natureFlavor" class="layui-col-sm11 show2"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【归经】</strong></p>
      <div id="belongLection" class="layui-col-sm11 show2"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【毒性】</strong></p>
      <div id="toxicity" class="layui-col-sm11 show2"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【质征】</strong></p>
      <div id="zhizheng" class="layui-col-sm11 show2"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【走官】</strong></p>
      <div id="zhouguan" class="layui-col-sm11 show2"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【入架】</strong></p>
      <div id="rujia" class="layui-col-sm11 show2"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【主治】</strong></p>
      <div id="majorFun" class="show2 layui-col-sm11"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【功效】</strong></p>
      <div id="efficacy" class="layui-col-sm11 show2"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【用法用量】</strong></p>
      <div id="usedosage" class="layui-col-sm11"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【验方】</strong></p>
      <div id="provedRecipe" class="layui-col-sm11 show2"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【采收加工】</strong></p>
      <div id="pickProcess" class="layui-col-sm11"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【药材鉴别】</strong></p>
      <div id="pharmIdentify" class="layui-col-sm11"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【化学成分】</strong></p>
      <div id="chemComponent" class="layui-col-sm11"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【药理作用】</strong></p>
      <div id="pharmAction" class="layui-col-sm11"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【产地分布】</strong></p>
      <div id="origin" class="layui-col-sm11"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm2"><strong>【现代临床研究】</strong></p>
      <div id="curResearch" class="layui-col-sm10" style="margin-left: -75px"></div>
    </div>
    <div class="layui-row">
      <p class="pst layui-col-sm1"><strong>【备注】</strong></p>
      <div id="member" class="show2 layui-col-sm11"></div>
    </div>
  </div>
</div>
<script>
  var $ =layui.$;
  //搜索点击事件
 $("#searchBtn").click(function (){
   if(!$("#searchContext").val()==""||!$("#searchContext").val()==null) {
     $.ajax({
       url: "/miaosample/searchYaocai",
       type: "POST",
       data: {"leibie": $("#search_yaocai").val(), "searchContext": $("#searchContext").val()},
       dataType:"json",
       async: true,
       success:function (data){
         console.log(data)
         if(data!=null) {
           $("#zhname").html(data.zhname + "")
           $("#miaoname").html(data.miaoname)
           $("#enname").html(data.enname)
           $("#suname").html(data.suname)
           $("#latinname").html(data.latinname)
           $("#demo1").attr("src", "/imgs/" + data.picture)
           $("#plantsSrc").html(data.plantsSrc)
           $("#pharmSrc").html(data.pharmSrc)
           $("#plantsForm").html(data.plantsForm)
           $("#origin").html(data.origin)
           $("#usePart").html(data.usePart)
           $("#miaoType").html(data.miaoType)
           $("#natureFlavor").html(data.natureFlavor)
           $("#belongLection").html(data.belongLection)
           $("#toxicity").html(data.toxicity)
           $("#zhizheng").html(data.zhizheng)
           $("#zhouguan").html(data.zhouguan)
           $("#rujia").html(data.rujia)
           $("#majorFun").html(data.majorFun)
           $("#efficacy").html(data.efficacy)
           $("#usedosage").html(data.usedosage)
           $("#provedRecipe").html(data.provedRecipe)
           $("#pickProcess").html(data.pickProcess)
           $("#pharmIdentify").html(data.pharmIdentify)
           $("#pharmAction").html(data.pharmAction)
           $("#chemComponent").html(data.chemComponent)
           $("#curResearch").html(data.curResearch)
           $("#member").html(data.member)
           $("#yaocai").css("display", "")
         }else{
           layer.alert("未查询到药材")
         }
         $("#searchContext").val(null)
       }
     },"json");
   }
 });
  //图片预览
  $("#demo1").click(function (){
    var img = new Image(400,400);
    img.src =$("#demo1").attr("src");
    var height=img.height,width=img.width;
    if(img.height > 600) {
      height = 'auto';
      width=(600/(img.height))*(img.width);
    }

    var imgHtml = "<img src='" + $("#demo1").attr("src") + "' height='"+height+"' width='"+width+"' />";
    //弹出层
    layer.open({
      type: 1,
      offset: 'auto',
      area: [width,'auto'],
      shadeClose:true,//点击外围关闭弹窗
      scrollbar: false,//不现实滚动条
      title: "图片预览", //不显示标题
      content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
      cancel: function () {//取消之后的一些操作（点击X）

      }
    });
  });
</script>
</body>
</html>
